// 轨迹回放
export const markerCarFn = (polygon) => {
  var paths = [];

  for (var i = 0; i < polygon.length; i = i + 2) {
    paths.push(new TMap.LatLng(polygon[i + 1], polygon[i]));
  }

  var polylineLayer = new TMap.MultiPolyline({
    map: window.map, // 绘制到目标地图
    // 折线样式定义
    styles: {
      style_blue: new TMap.PolylineStyle({
        color: "#3777FF", // 线填充色
        width: 4, // 折线宽度
        borderWidth: 2, // 边线宽度
        borderColor: "#FFF", // 边线颜色
        lineCap: "round", // 线端头方式
        eraseColor: "rgba(190,188,188,1)",
      }),
    },
    geometries: [
      {
        id: "erasePath",
        styleId: "style_blue",
        paths,
      },
    ],
  });
  var marker = new TMap.MultiMarker({
    map,
    styles: {
      "car-down": new TMap.MarkerStyle({
        width: 40,
        height: 40,
        anchor: {
          x: 20,
          y: 20,
        },
        faceTo: "map",
        rotate: 180,
        src: "https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/car.png",
      }),
      start: new TMap.MarkerStyle({
        width: 25,
        height: 35,
        anchor: { x: 16, y: 32 },
        src: "https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/start.png",
      }),
      end: new TMap.MarkerStyle({
        width: 25,
        height: 35,
        anchor: { x: 16, y: 32 },
        src: "https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/end.png",
      }),
    },
    geometries: [
      {
        id: "car",
        styleId: "car-down",
        position: new TMap.LatLng(39.98481500648338, 116.30571126937866),
      },
      {
        id: "start",
        styleId: "start",
        position: new TMap.LatLng(39.98481500648338, 116.30571126937866),
      },
      {
        id: "end",
        styleId: "end",
        position: new TMap.LatLng(39.978813710266024, 116.31699800491333),
      },
    ],
  });

  // 使用marker 移动接口， https://lbs.qq.com/webApi/javascriptGL/glDoc/glDocMarker
  marker.moveAlong(
    {
      car: {
        path: paths,
        speed: 250 * 50,
      },
    },
    {
      autoRotation: true,
    }
  );
  marker.on("moving", (e) => {
    var passedLatLngs = e.car && e.car.passedLatLngs;
    if (passedLatLngs) {
      // 使用路线擦除接口 eraseTo, https://lbs.qq.com/webApi/javascriptGL/glDoc/glDocVector
      polylineLayer.eraseTo(
        "erasePath",
        passedLatLngs.length - 1,
        passedLatLngs[passedLatLngs.length - 1]
      );
    }
  });
};
// 画边界线面
export const markerPolygonFn = (polygon) => {
  var paths = [];

  for (var i = 0; i < polygon.length; i = i + 2) {
    paths.push(new TMap.LatLng(polygon[i + 1], polygon[i]));
  }

  new TMap.MultiPolyline({
    id: "polyline", //设置图层唯一id
    map: window.map, //指定绘制到的地图id

    //自定义两组样式
    styles: {
      //第一组样式
      style_blue: new TMap.PolylineStyle({
        color: "#3777FF", //线填充色
        width: 6, //折线宽度
      }),
      //第二组样式
      style_red: new TMap.PolylineStyle({
        color: "#CC0000",
        width: 6,
      }),
    },

    //设置折线的数据，并为每条线配置不同的样式
    geometries: [
      {
        //第1条线
        id: "pl_1", //设置折线唯一id，可用于删除等
        styleId: "style_blue", //绑定样式id,对应上面第一组样式
        paths,
      },
    ],
  });
};
// 热力图
export const markerHeatFn = (polygon) => {
  var paths = [];

  for (var i = 0; i < polygon.length; i = i + 2) {
    // new TMap.LatLng(polygon[0][i + 1], polygon[0][i])
    paths.push({
      lat: polygon[i + 1],
      lng: polygon[i],
      count: Math.floor(Math.random() * 100) + 1,
    });
  }

  let Heat = new TMap.visualization.Heat({
    max: 350, // 热力最强阈值
    min: 0, // 热力最弱阈值
    height: 0, // 峰值高度
    radius: 30, // 最大辐射半径
    gradientColor: {
      0.1: "(rgba(40,118,70,0.2))",
      0.4: "rgba(40,118,70,0.4)",
      0.6: "rgba(229,195,77,0.6)",
      0.75: "rgba(215,136,67,0.7)",
      1: "rgba(188,91,82,0.85)",
    },
  }).addTo(window.map);

  Heat.setData(paths);
};
// 平滑跳转
export const easeToFn = ({ lat, lng }) => {
  window.map.easeTo(
    {
      zoom: 13,
      rotation: 354, // 地图在水平面上的旋转角度
      // pitch: 78, //仰角
      center: new TMap.LatLng(lat, lng),
    },
    { duration: 1.5 * 1000 }
  ); //平滑缩放,旋转到指定级别
};
